<script setup lang="ts">
import { reactive } from "vue";
import { useProject } from "../project/useProject"
import { userInformation } from "./userInformation";
import navBar from "../../../src/components/layout/navBar.vue"

const props = defineProps<{}>()
const emit = defineEmits([])
const initData = reactive({} as any)
const {
    backHome,
} = useProject(props, initData, emit)
const {
    exit
} = userInformation(props, initData, emit)

</script>
<template>
    <div class="setupPage">
        <div class="setupTop">
            <div>
                            <navBar left="Y" right="N" title="我的"></navBar>

            </div>
            <div>
                <div class="headPortrait">
                    <div class="border">
                        <van-image
                            round
                            width="5rem"
                            height="5rem"
                            fit="cover"
                            src="https://img01.yzcdn.cn/vant/cat.jpeg"
                        />
                    </div>
                </div>
                <div class="userName">用户名</div>
                <div class="telephone">电话</div>
            </div>
        </div>
        <div class="setMain">
            <van-cell title="个人信息" is-link to="editInformation" />
            <van-cell title="修改密码" is-link to="changePassword" />
            <van-cell title="手势密码" is-link />
            <van-cell title="刷脸登录" is-link />
        </div>
        <div class="about">
            <van-cell title="关于" is-link />
        </div>
        <div class="setBottom">
            <div class="exit" @click="exit">退出登录</div>
        </div>
    </div>
</template>
<style scoped>
.setupTop {
    background: url(../../../public/assets/projectPhotos/background.png);
    height: 250px;
}
.setupPage {
    display: flex;
    flex-direction: column;
}
.navbar {
    background: url(../../../public/assets/projectPhotos/background.png);
}

:deep(.van-nav-bar__title) {
    color: white;
}
:deep(.van-nav-bar__text) {
    color: white;
}
:deep(.van-icon-arrow-left:before) {
    color: white;
}
.headPortrait {
    margin-top: 15px;
    text-align: center;
}
.border {
    display: inline-block;
    border-radius: 50%;
    border: solid 8px rgb(96, 132, 225);
    width: 6rem;
    height: 6rem;
}
.userName {
    text-align: center;
    color: white;
    font-size: 25px;
}
.telephone {
    text-align: center;
    color: white;
}
.about {
    border-top: rgba(236, 224, 224, 0.781) solid 20px;
}
.exit {
    width: 405px;
    height: 55px;
    text-align: center;
    line-height: 55px;
    color: white;
    background-color: rgb(65, 135, 242);
    position: fixed;
    bottom: 0;
}
</style>